<script setup name="p-switchSet">
const emit = defineEmits()
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  label: {
    type: String,
    default: ''
  },
  beforeChange: {
    type: Function
  }
})
const data = ref(1)

watch(
  () => props.modelValue,
  val => {
    data.value = String(val) || '1'
  },
  { deep: true, immediate: true }
)

watchEffect(() => {
  emit('update:modelValue', data.value)
})

const change = val => {
  emit('change', val)
}
// const beforeChange = () => {
//   emit('beforeChange', val)
// }
</script>

<template>
  <div class="flex-item-center">
    <label style="margin-right: 10px">{{ props.label }}</label>
    <el-switch
      :before-change="props.beforeChange"
      @change="change"
      :disabled="props.disabled"
      v-model="data"
      active-value="0"
      inactive-value="1"
    />
  </div>
</template>
